"use client"

import { cn } from "@/lib/utils"
import type { Category } from "@/types"

interface CategorySidebarProps {
  categories: readonly Category[]
  selectedCategory: Category
  onCategorySelect: (category: Category) => void
}

export function CategorySidebar({ categories, selectedCategory, onCategorySelect }: CategorySidebarProps) {
  return (
    <div className="w-20 md:w-24 bg-card border-r border-border flex-shrink-0">
      <div className="sticky top-0 py-4 space-y-2">
        {categories.map((category) => (
          <button
            key={category}
            onClick={() => onCategorySelect(category)}
            className={cn(
              "w-full py-3 px-2 text-sm font-medium rounded-lg mx-2 transition-all duration-200",
              "hover:bg-accent hover:text-accent-foreground",
              "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
              selectedCategory === category ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground",
            )}
          >
            <div className="flex flex-col items-center gap-1">
              <span className="text-lg">
                {category === "泡面" && "🍜"}
                {category === "肠" && "🌭"}
                {category === "蛋" && "🥚"}
                {category === "饮料" && "🥤"}
              </span>
              <span className="text-xs leading-tight">{category}</span>
            </div>
          </button>
        ))}
      </div>
    </div>
  )
}
